.surely-table {
  --surely-table-primary-color: #64c3c8;
  --surely-table-disabled-color: #ccd6db;
  &-checkbox {
    &-inner {
      width: 22px;
      height: 22px;
      border-radius: 4px;
      border-color: #ccd6db;
      &::after {
        height: 16px;
        width: 8px;
        top: 40%;
        left: 18%;
      }
    }
    &-disabled &-inner {
      background-color: var(--surely-table-disabled-color);
    }
  }
  &-radio {
    &-inner {
      width: 22px;
      height: 22px;
      border-color: #ccd6db;
      &::after {
        top: 6px;
        left: 6px;
        background: #fff;
      }
    }
    &-checked &-inner {
      background-color: var(--surely-table-primary-color);
    }
    &-disabled &-inner {
      border-color: var(--surely-table-disabled-color) !important;
      background-color: var(--surely-table-disabled-color);
    }
  }
  &-header-cell {
    background-color: #f3f3f3;
  }
  &-cell {
    border-color: #dadada;
  }
  &-row.surely-table-row {
    &-selected {
      background: #f8f8f8;
    }
    &-hover {
      background: #f3f3f3 !important;
    }
  }
}
